<template>
	<view class="page_content">
		<view class="timeSelect">
			
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in incomeList" :key="item.id">
				<view class="header">
					<view class="title">{{item.title}}</view>
					<view class="money">+{{item.amount}}</view>
				</view>
				<view>订单号：{{item.linkId}}</view>
				<view>{{item.createTime}}</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		<view class='no-shop' v-if="incomeList.length<0 && !loading">
			<view class='pictrue' style="margin: 0 auto;text-align: center;">
				<!-- <image src='/static/images/no-shop.png'></image> -->
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMerIncomeListApi
	} from '@/api/merchant.js';
	export default {
		data() {
			return {
				where: {
					page: 1,
					limit: 20,
					stime: null,
					etime: null
				},
				incomeList: [],
				loadTitle: '',
				loading: false,
				loadend: false,
			}
		},
		onShow() {
			this.getIncomeList();
		},
		methods: {
			getIncomeList(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				
				if (isPage === true) that.$set(that, 'incomeList', []);
				//加载弹窗
				that.loading = true;
				that.loadTitle = '';
				getMerIncomeListApi(that.where).then(res => {
					let list = res.data.list;
					let incomeList = that.$util.SplitArray(list, that.incomeList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? this.$t('下拉加载更多数据') : this.$t('已无更多数据');
					that.$set(that, 'incomeList', incomeList);
					that.$set(that.where, 'page', that.where.page + 1);
					that.loading = false;
							
				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.$t(`已无更多数据`);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding: 20rpx 32rpx;
		
		.item{
			background-color: #fff;
			border-radius: 24rpx;
			padding: 26rpx 32rpx;
			color: #979797;
			font-size: 22rpx;
			margin-bottom: 20rpx;
			
			view{
				margin-bottom: 12rpx;
			}
			
			.header{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.title{
					color: #343643;
					font-size: 28rpx;
					font-weight: 400;
				}
				
				.money{
					font-size: 40rpx;
					color: #F7A231;
					font-weight: 600;
				}
			}
		}
	}
</style>
